<template>
	<div class="imgupload">
		<div class="imgItemParent" v-for="(item,index ) in pageImgs" :key="index" v-show="index < limit" :class="{'longSize': limit == 1}">
			<div class="imgItem" :class="{active:item.fileCheck}">
				<img class="content" :src="item.fileBlob" v-show="item.fileName">
				<i class="el-icon-delete" v-show="edit" @click.stop="deleteImg(index)"></i>
			</div>
			<div class="name" :title="item.fileName" v-if="item.fileName" @click="checkFun(index)">
				<i class="el-icon-success" v-show="item.fileCheck"></i>
				<i class="no-check" v-show="!item.fileCheck"></i>
				<span :class="{active:item.fileCheck}">{{item.fileName}}</span>
			</div>
		</div>

		<div class="imgItemParent" :class="{'longSize': limit == 1}" v-show="pageImgs.length < limit && edit">
			<div class="imgItem">
				<i class="el-icon-plus"  v-show="edit"></i>
				<input type="file" accept="image/*" @change="imgChange" ref="imgRef">
			</div>
		</div>

		<div style="clear: both;"></div>
	</div>
</template>

<script>
	export default {
		props: ['imgList', 'limit', 'isMultiple', 'type','hidden','edit'],
		data() {
			return {
				pageImgs: []
			}
		},
		methods: {

			deleteImg(index) { //删除图片
				let self = this;
				this.$confirm('确定删除图片？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.pageImgs.splice(index, 1);
				})
			},
			checkFun(index) { //选中图片
				if(!this.edit) {
					return false
				}
				if(this.limit > 1){
					let checkIndex =  this.pageImgs.findIndex((item) => item.fileCheck == 1);
					if(checkIndex == index ){
						return;
					}
					this.pageImgs.forEach((item) => {item.fileCheck = 0});
					this.pageImgs[index].fileCheck = 1;
					this.$emit('updateBackGround',this.pageImgs[index]);
				}
			},
			imgChange(e, index) { //选择文件
				let self = this;
				if (e.target.files.length) {
					let file = e.target.files[0];
					if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
						return false
					}
					var reader = new FileReader();
					let fileCheck = self.limit > 1?0:1;
					reader.readAsDataURL(file);
					reader.onload = (eve) => {
						let f = {
							fileBlob: eve.target.result,
							fileName: file.name,
							fileCheck: fileCheck,
							fileType: self.type,
						};
						self.pageImgs.push(f);
						if(fileCheck){
							self.$eventBus.$emit('updateBackGround',f);
						}
					}
				}
			},

			getImages(){
				return 	this.pageImgs;
			},

		},
		watch: {
			imgList(val) {
				this.pageImgs = val;
			}
		}
	}
</script>

<style scoped lang="scss">
	.imgupload {
		.imgItemParent {
			float: left;
			margin-right: 20px;
			margin-bottom: 10px;
			.name {
				padding: 5px 0;
				font-size: 12px;
				color: #333333;
				text-align: center;
				width: 120px;
				cursor: pointer;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				i {
					font-size: 18px;
					vertical-align: middle;
					margin-right: 5px;
					&.el-icon-success {
						color: #409eff;
					}
					&.no-check {
						display: inline-block;
						width: 18px;
						height: 18px;
						border: 1px solid #cccccc;
						border-radius: 50%;
					}
				}
				span {
					vertical-align: middle;
					&.active {
						color: #409eff;
					}
				}
			}
			&.longSize {
				.imgItem {
					width: 200px;
					height: 40px;
				}
			}
		}
		.imgItem {
			border: 1px dashed #cccccc;
			width: 120px;
			height: 80px;
			box-sizing: border-box;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f2f2f2;
			padding: 5px;
			&.active {
				border: 1px solid #409eff;
				background-color: #eff6ff;
			}
			.el-icon-plus {
				font-size: 30px;
				color: #cccccc;
			}
			.el-icon-delete {
				font-size: 12px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 5px;
				cursor: pointer;
				z-index: 2;
				background: #8e8888b8;
				color: #ffffff;
			}
			input {
				position: absolute;
				width: 100%;
				height: 100%;
				opacity: 0;
				cursor: pointer;
			}
			.content {
				max-width: 100%;
				max-height: 100%;
			}
			.click {
				font-size: 12px;
			}
		}
	}
</style>
